<template>
  <div class="aui-card-list">
    <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}"
      @searchReset="searchReset()">
      <el-col :span="5">
        <el-form-item label="SQL字符串">
          <el-input v-model="dataForm.sqlStr" placeholder="SQL字符串" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="执行时长">
          <el-input v-model="dataForm.executeDuration" placeholder="执行时长（毫秒）" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="时间">
          <el-date-picker v-model="dataForm.bDate" type="date" :placeholder="$t('beginDate')" value-format="yyyy-MM-dd"
            style="width: 160px">
          </el-date-picker>
          -
          <el-date-picker v-model="dataForm.eDate" type="date" :placeholder="$t('endDate')" value-format="yyyy-MM-dd"
            style="width: 160px">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
          <el-radio-group v-model="show" @change="change">
            <el-radio-button label="1">SQL执行日志</el-radio-button>
            <el-radio-button label="2">慢SQL查询</el-radio-button>
          </el-radio-group>
          <!-- <el-button v-if="$hasPermission('sys:sysLogSql:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
          <el-button v-if="$hasPermission('sys:sysLogSql:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> -->
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
        </template>
      </vxe-toolbar>
      <div class="aui-card-list-body-table">
      <vxe-table ref="xTable" :loading="dataListLoading" class="vxe-table-element" auto-resize
        @select-change="dataListSelectionChangeHandleVex" @select-all="dataListSelectionAllChangeHandleVex"
        :data="dataList" max-height="auto">
        <vxe-table-column type="index" align="center" width="40"></vxe-table-column>
        <vxe-table-column field="sqlStr" title="SQL 字符串">
        </vxe-table-column>
        <vxe-table-column field="executionStatus" title="执行状态">
        </vxe-table-column>
        <vxe-table-column field="executeRows" title="执行影响行数">
        </vxe-table-column>
        <vxe-table-column field="executeDuration" title="执行时长">
        </vxe-table-column>
        <vxe-table-column field="slowDuration" title="最慢时长">
        </vxe-table-column>
        <vxe-table-column field="transactionalRows" title="事务影响行数">
        </vxe-table-column>
        <vxe-table-column field="errorRows" title="错误行数">
        </vxe-table-column>
        <vxe-table-column field="updateRows" title="更新行数">
        </vxe-table-column>
        <vxe-table-column field="readRows" title="读取行数">
        </vxe-table-column>
        <vxe-table-column field="maxConcurrent" title="最大并发数">
        </vxe-table-column>
        <vxe-table-column title="handle" width="100" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)">
              查看</el-button>
            <!-- <el-button v-if="$hasPermission('sys:sysLogSql:delete')" type="text" size="small" icon="el-icon-delete"
              @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> -->
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './sysLogSql-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      searchShow: true,
      show: '1',
      mixinViewModuleOptions: {
        getDataListURL: '/sys/sysLogSql/page',
        getDataListIsPage: true,
        deleteURL: '/sys/sysLogSql',
        deleteIsBatch: true,
        exportURL: '/sys/sysLogSql/export'
      },
      dataForm: {
        sqlStr: '',
        executeDuration: '',
        bDate: null,
        eDate: null,
        order: '',
        orderField: ''
      }
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    change (e) {
      if (e === '1') {
        this.dataForm.order = null
        this.dataForm.orderField = null
      } else if (e === '2') {
        this.dataForm.order = 'desc'
        this.dataForm.orderField = 'execute_duration'
      }
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle (row) {
      let id
      if (row) {
        id = row.id
      }
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    }
  }
}
</script>
